<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="renderer" content="webkit">
    <title th:text="${title}"></title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <script src="/links/jquery/jquery-3.5.1.min.js"></script>
    <script src="/links/polyfill.min.js"></script>
    <script src="/links/axios/axios.min.js"></script>
    <script src="/links/vue/vue.min.js"></script>
    <script src="/links/element-ui/index.js"></script>
    <script src="/links/dayjs.min.js"></script>
    <script src="/js/HttpApi.js"></script>
    <script src="/js/AutoCode.js"></script>
    <link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
    <link href="/css/default.css" rel="stylesheet"/>
    <link href="/links/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<style>
    .titleHeader * {
        color: #FFFFFF;
    }

    .titleHeader .el-dialog__title{
        color: #000000;
    }

    .titleHeader .el-input *{
        color: #000000;
    }


    .messageWd:hover{
        background-color: #f5f7fa;
    }

    .messageWd:hover .messageCreateTime{
        display: none;
    }
    .messageWd .setReadButton{
        display: none;
        size: 12px;
        padding:5px 8px ;
    }

    .messageWd:hover .setReadButton{
        display: block;
    }

    .activeMenuGoup{
        background-color: #005A8E;
    }

    .el-tabs__nav-next, .el-tabs__nav-prev {
        line-height: 35px;
    }

    .el-submenu__title .fa,
    .el-menu-item .fa{
        width: 16px;
    }
</style>
<body>
<el-container id="app" style="height: 100%;width: 100%;margin:0;padding:0;border:0;">
    <el-header class="titleHeader" style="height:50px;border:0;background-color:#009CDE;color:#FFF;padding:0 20px;display:flex;align-items: center;justify-content: space-between;">
        <div class="flex" style="height: 100%;">
            <div style="width:230px;">
                <i class="el-icon-s-fold" style="font-size: 20px;padding-right:10px;" @click="showHiddenMenu"></i>
                <span style="font-size: 16px;" th:text="${projectName}"></span>
            </div>

            <div class="flex" style="height: 100%;">
                <div class="flex" style="height: 100%;align-items: center;padding: 10px;" v-for="(item,index) in menus" :class="{ activeMenuGoup: item.id==activeMenu }" @click="changeActiveMenu(item.id,index)">
                    <i :class="['fa',item.icon]" aria-hidden="true" /></i>&nbsp;{{item.name}}
                </div>
            </div>
        </div>

        <div>
            <el-popover placement="bottom" width="400" trigger="hover" th:if="${mode} == 'dev'">
                    <span slot="reference" style="font-size: 14px;"><i class="el-icon-monitor"
                                              style="padding-right:5px;font-size: 16px;"></i>开发者信息</span>

                <div class="flex ac-form-oper-default-line">
                    <div class="title">开发者信息</div>
                    <div class="ac-form-oper">
                        <el-button size="mini" type="warning" @click="openDeveloperLogin" native-type="button">
                            <template v-if="developer.email=='请先进行登录'">
                                点击登录
                            </template>
                            <template v-else>
                                重新登陆
                            </template>
                        </el-button>
                    </div>
                </div>


                <el-descriptions :column="1" size="small" border :label-style="{'width':'100px'}">
                    <el-descriptions-item label="项目信息">
                        {{ developer.code }}
                    </el-descriptions-item>
                    <el-descriptions-item label="登陆邮箱">
                        {{ developer.email }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系方式">
                        {{ developer.phone }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户全名">
                        {{ developer.fullname }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-popover>

            <span style="margin-right: 15px;font-size: 14px;padding-left: 10px;padding-right: 5px;cursor: pointer; " @click="design"
                  th:if="${mode} == 'dev'">
				<i class="el-icon-edit" style="padding-right:5px;font-size: 16px;"></i>设计器
        </span>



            <el-popover placement="bottom" width="350" trigger="click" style="margin-right: 20px;">
            <span slot="reference">
                <el-badge :value="wdNum" :max="99" :hidden="wdNum==0">
                    <i class="el-icon-close-notification" style="font-size: 18px;"></i>
                </el-badge>
            </span>
                <div>
                    <div style="position: relative;text-align: center;border-bottom: 1px solid #d9d9d9;padding-bottom: 8px;margin-bottom: 3px;">
                        <div>通知</div>
                        <div style="position: absolute;right: 10px;top: -2px;padding: 0;">
                            <el-button type="text" size="mini" @click="cleanWd">清空</el-button>
                        </div>
                    </div>
                    <div class="messageWd" v-for="(item, index) in messageWd.slice(0,5)" :key="item.id" style="padding: 10px 8px 5px;border-top:1px solid #d9d9d9;">
                        <div style="padding-bottom: 10px;">
                            {{item.content}}
                        </div>
                        <div class="flex" style="color:#8D8D8D;font-size: 12px;">
                            <div style="padding: 5px 0">{{item.type}}</div>
                            <div class="messageCreateTime">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}}</div>
                            <el-button class="setReadButton" size="mini" @click="setRead(item.id)">标记已读</el-button>
                        </div>
                    </div>

                    <div v-if="messageWd.length==0" style="color:#8D8D8D;padding: 10px;text-align: center;">
                        没有未读消息
                    </div>

                    <div style="padding: 0;text-align: center;border-top: 1px solid #d9d9d9;">
                        <el-button type="text" size="mini">查看全部</el-button>
                    </div>
                </div>


            </el-popover>

            <el-popover placement="bottom" width="320" trigger="hover">
            <span slot="reference" style="font-size: 14px;"><i class="el-icon-s-custom"
                                      style="padding-right:5px;font-size: 16px;"></i>{{ users.realName }}</span>
                <el-descriptions :column="1" size="small" border :label-style="{'width':'90px'}">
                    <template slot="title">
                        <el-button type="warning" size="mini" @click="tc" native-type="button">退出登录</el-button>
                    </template>
                    <template slot="extra">
                        <el-button type="primary" size="mini" @click="modifypasswrd" native-type="button">修改密码</el-button>
                    </template>
                    <el-descriptions-item label="用户账号">
                        {{ users.userName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="用户姓名">
                        {{ users.realName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="组织机构">
                        {{ users.orgName }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-popover>
        </div>
    </el-header>
    <el-main style="margin: 0;padding: 0;">
        <el-container style="margin:0;padding:0;border:0;height: 100%;">
            <el-aside style="border:0; height: 100%; overflow-y: auto;" :width="asideWidth">
                <el-menu style="background-color: rgb(242,242,242);" :default-active="defaultActive" @select="selectMenu" :collapse-transition="false" :collapse="menuCollapse">

                    <template v-for="(item,index) in leftMenus">
                        <template v-if="item.children === undefined || item.children.length == 0">
                            <el-menu-item :index="item.id" v-if="(item.hasCalc==='Y' && item.counter !== 0) || item.hasCalc!=='Y' ">
                                <i :class="['fa',item.icon]"></i>
                                <span slot="title">{{item.name}}<label v-if="item.counter>0" style="color: #FF0000;">【{{item.counter}}】</label>
                                </span>
                            </el-menu-item>
                        </template>

                        <template v-else>
                            <el-submenu :index="item.id" style="background-color: rgb(242,242,242);" >
                                <template slot="title">
                                    <i :class="['fa',item.icon]"></i>
                                    <span slot="title">{{item.name}}</span>
                                </template>

                                <template v-for="(item2,index2) in item.children">
                                    <template v-if="item2.children===undefined || item2.children.length==0">
                                        <el-menu-item :index="item2.id" v-if="(item2.hasCalc==='Y' && item2.counter !== 0) || item2.hasCalc!=='Y'" style="padding-left: 50px;background-color: rgb(242,242,242);">
                                            <template slot="title">
                                                <i :class="['fa',item2.icon]"></i>
                                                <span slot="title">{{item2.name}} <label v-if="item2.counter>0" style="color: #FF0000;">【{{item2.counter}}】</label></span>
                                            </template>
                                        </el-menu-item>
                                    </template>

                                    <template v-else>
                                        <el-submenu :index="item2.id" style="padding-left: 10px;background-color: rgb(242,242,242);">
                                            <template slot="title">
                                                <i :class="['fa',item2.icon]"></i>
                                                <span slot="title">{{item2.name}}</span>
                                            </template>
                                            <el-menu-item v-for="(item3,index3) in item2.children" :index="item3.id" v-if="(item3.hasCalc==='Y' && item3.counter !== 0) || item3.hasCalc!=='Y'" style="background-color: rgb(242,242,242);">
                                                <template slot="title">
                                                    <i :class="['fa',item3.icon]"></i>
                                                    <span slot="title">{{item3.name}} <label v-if="item3.counter>0" style="color: #FF0000;">【{{item3.counter}}】</label></span>
                                                </template>
                                            </el-menu-item>
                                        </el-submenu>
                                    </template>
                                </template>
                            </el-submenu>
                        </template>
                    </template>

                </el-menu>
            </el-aside>

            <el-main style="margin: 0; border: 0; background-color: #EDF0F5; padding: 0 5px 5px;">

                <el-tabs v-model="tabsValue" style="width: 100%; height: 100%" @tab-remove="removeTab">
                    <el-tab-pane :key="item.name" v-for="(item, index) in Tabs" :label="item.title" :name="item.name" :closable='item.closable'>
                        <iframe height="100%" width="100%" :src="'/platform/entrance/'+item.name"></iframe>
                    </el-tab-pane>
                </el-tabs>

            </el-main>

        </el-container>
    </el-main>

    <el-dialog title="修改密码" :visible.sync="modifyPasswrd" width="400px" :close-on-click-modal="false">
        <el-form :model="password" :rules="rules" ref="passwordForm" label-position="left" label-width="100px" size="mini" @submit.native.prevent>
            <el-form-item label="用户密码" prop="password">
                <el-input type="password" v-model="password.password" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newpasswrd">
                <el-input type="password" v-model="password.newpasswrd" autocomplete="off" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmpasswrd">
                <el-input type="password" v-model="password.confirmpasswrd" autocomplete="off" show-password></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="modifyPasswrd = false">取 消</el-button>
            <el-button type="primary" @click="modify">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="登录过期，请重新输入密码" :visible.sync="reloginSync" width="400px" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="reloginModel" :rules="rules" ref="reloginForm" label-position="left"
                 label-width="100px" size="mini" @submit.native.prevent>
            <el-form-item label="用户名" prop="username">
                {{reloginModel.username}}
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="reloginModel.password" autocomplete="off" show-password @keyup.enter.native="relogin"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="reloginSync = false">取 消</el-button>
            <el-button type="primary" @click="relogin">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog :visible.sync="developerLogin.visible" title="开发者登录"
               width="500px"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
        <div style="width:100%;">
            <el-form label-width="0px" label-position="right"
                     size="mini" ref="developerLogin" :model="developerLogin.data">
                <el-row>
                    <el-col :span=24>
                        <el-form-item prop="account" label="" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }
]">
                            <el-input type="text" size="mini" v-model="developerLogin.data.account"
                                      placeholder="手机号或邮箱账号"></el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span=24>
                        <el-form-item prop="password" label="" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }
]">
                            <el-input type="text" size="mini" v-model="developerLogin.data.password"
                                      placeholder="请输入登录密码" show-password></el-input>

                        </el-form-item>
                    </el-col>
                    <el-col :span=24>
                        <el-form-item prop="name" label="" :rules="[]">
                            <div style="width: 100%; margin-bottom: 0px; color: rgb(194, 194, 194);">
                                如没有开发者账号，请先登录https://autocode.net.cn进行注册，并联系项目管理员分配开发权限
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span=24>
                        <el-form-item prop="name" label="" :rules="[]">
                            <el-button size="mini" @click="developerLogin_login" type="warning" native-type="button"
                                       style="width:100%;">登 录
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="dialog-footer" slot="footer">

        </div>
    </el-dialog>
</el-container>
</body>
<script>
    function relogin(){
        mainVue.reloginModel.password="";
        mainVue.reloginSync = true;
    }

    const mainVue = new Vue({
        el: '#app',
        data: function () {
            var validatePass4 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.password.newpasswrd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                navs: [],
                menus: [],
                leftMenus:[],
                defaultActive:'',
                modifyPasswrd: false,
                reloginSync: false,
                password: {oldpasswrd: '', newpasswrd: '', confirmpasswrd: ''},
                reloginModel:{username:'',password:''},
                rules: {
                    oldpasswrd: [{required: true, message: '请输入原密码', trigger: 'blur'}],
                    newpasswrd: [{required: true, message: '请输入新密码', trigger: 'blur'}],
                    confirmpasswrd: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                        {validator: validatePass4, trigger: 'blur'}
                    ],
                    password: [{required: true, message: '请确认密码', trigger: 'blur'}]
                },
                tabsValue: 'homepage',
                Tabs: [],
                users: {},
                menuCollapse:false,
                asideWidth:'220px',
                developer:{},
                developerLogin:{
                    data:{},
                    operData:{},
                    visible:false
                },
                messageWd:[],
                wdNum:0,
                timer:null,
                activeMenu:null
            }
        },
        created: function () {
            let that = this;
            HttpApi.checkLogin(function(res){
                that.reloginModel.username = res.userName;
                that.users = res;
            });

            HttpApi.post("/platform/menus/userMenus", {},function(res){
                that.menus = res;
                if(res.length>0 && res[0].children ){
                    that.leftMenus=res[0].children;
                    that.activeMenu=res[0].id;
                }
                //选中第一个菜单
                if(that.leftMenus.length>0){
                    let firstSupMen = that.leftMenus[0];
                    if(firstSupMen.children && firstSupMen.children.length>0){
                        that.defaultActive = firstSupMen.children[0].id;
                        let keyPath = [firstSupMen.id,that.defaultActive];
                        that.selectMenu(that.defaultActive,keyPath);
                    }else{
                        that.defaultActive = firstSupMen.id;
                        let keyPath = [firstSupMen.id];
                        that.selectMenu(that.defaultActive,keyPath);
                    }
                }
            });

            HttpApi.post("/design/developer/checkToken",{},function(res){
                that.developer = res;
            });

            this.messageTx();
        },
        methods: {
            design: function (){
                let that = this;
                //打开设计器
                if (this.developer.appid) {
                    HttpApi.post("/design/developer/openDesign",{"appid":this.developer.appid},function(res){
                        let len = res.ipCode.length;
                        if(len===6){
                            window.open("https://design.autocode.net.cn/login/" + that.developer.appid + "?ipCode=" + res.ipCode);
                        }else{
                            that.$alert(res.ipCode);
                        }
                    });
                } else {
                    window.open("https://autocode.net.cn/");
                }
            },
            openDeveloperLogin:function(){
                let that = this;
                this.$data.developerLogin.data = this.$options.data().developerLogin.data;
                this.$data.developerLogin.operData = this.$options.data().developerLogin.operData;
                this.developerLogin.visible = true;
            },
            developerLogin_login:function(){
                let that = this;
                this.$refs.developerLogin.validate(function(valid){
                    if(valid){
                        HttpApi.post("/design/developerLogin/login",that.developerLogin.data,function(res){
                            /*请补充方法信息*/
                            that.developer = res;
                            that.developerLogin.visible = false;
                        });
                    }else{
                        return false;
                    }
                });
            },
            changeActiveMenu:function(menuId,index){
                if (menuId!=this.activeMenu){
                    this.activeMenu = menuId;
                    this.leftMenus = this.menus[index].children;
                    this.defaultActive = null;
                }
            },
            selectMenu: function (key, keyPath) {
                let len = keyPath.length;
                let curArray = this.leftMenus;
                let navs = [];
                for (let i = 0; i < len; i++) {
                    let curItem = curArray.find(function(item){
                        return item.id==keyPath[i];
                    })

                    navs.push(curItem.name);
                    if (i + 1 < len) {
                        curArray = curItem.children;
                    }
                }

                let title = navs[navs.length-1];
                let tab = {
                    closable: true,
                    title: title,
                    name: key
                };

                var isRepeat = this.Tabs.filter(tab => tab.name == key);
                if(isRepeat.length == 0){
                    //新增tab，新增iframe
                    this.Tabs.push(tab);
                }
                this.tabsValue = key;
            },
            tc: function () {
                HttpApi.post("/platform/logout", {},function(res){
                    window.location.href = "/platform/forLogin";
                })
            },
            modifypasswrd: function () {
                this.modifyPasswrd = true;
            },
            modify: function () {
                let _that = this;
                this.$refs['passwordForm'].validate(function (valid) {
                    if (valid) {
                        HttpApi.post("/platform/modifySelfPasswrd", _that.password, function(res){
                            _that.$confirm('密码修改成功！', '提示', {
                                confirmButtonText: '确定',
                                showCancelButton: false, //不显示取消按钮
                                type: 'success'
                            }).then(() => {
                                _that.tc();
                            })
                        })
                    }
                });
            },
            relogin: function(){
                let _that = this;
                this.$refs['reloginForm'].validate(function (valid) {
                    if (valid) {
                        HttpApi.relogin(_that.reloginModel,function(res,msg){
                            if(res){
                                _that.reloginSync = false;
                                _that.reloginModel.password="";
                            }else{
                                _that.$alert(msg);
                            }
                        });
                    }
                });
            },

            removeTab(targetName) {
                let tabs = this.Tabs;
                let activeName = this.tabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.tabsValue = activeName;
                this.Tabs = tabs.filter(tab => tab.name !== targetName);
            },
            showHiddenMenu:function(){
                let that = this;
                this.menuCollapse=!this.menuCollapse;
                if(this.menuCollapse){
                    this.asideWidth="64px";
                }else{
                    this.asideWidth="220px";
                }
            },
            messageTx:function(){
                let that = this;
                HttpApi.post("/sysManager/sysUser/messageWd",{},function(res){
                    that.messageWd = res;
                    that.wdNum = res.length;
                });

                this.timer = setInterval(function(){
                    HttpApi.post("/sysManager/sysUser/messageWd",{},function(res){
                        that.messageWd = res;
                        that.wdNum = res.length;
                    });
                },180000);
            },
            cleanWd:function (){
                let that = this;
                HttpApi.post("/sysManager/sysUser/cleanWd",{},function(res){
                    that.messageWd = [];
                    that.wdNum = 0;
                });
            },
            setRead:function (id){
                let that = this;
                HttpApi.post("/sysManager/sysUser/setRead",{"id":id},function(res){
                    let index = that.messageWd.findIndex(item => item.id === id)
                    if(index>=0){
                        that.messageWd.splice(index);
                    }
                    that.wdNum = that.messageWd.length;
                });
            }
        }
    });
</script>
</html>